<template>
<div>
  <div v-for="(item,index) in title" :key="item.data">
    <div style="background: rgb(245, 246, 247);">
        <div class="nctouch-home-block title-block">
            <div class="item-title">
            <div class="titleMain clearfix">
                <div class="title-text fl">
                <h3 class="fl">{{item.title}}</h3>
                </div>
            </div>
            </div>
        </div>
    </div>
    <div>
      <div style="background: rgb(245, 246, 247);">
        <div class="solaImgWrap">
          <div class="clearfix solaImgHead">
            <img
              :src="data[index].imageUrl"
              alt
            />
          </div>
          <div class=" solaImg_box">
            <div class="solaImg_list">
              <div class="solaImg" style="margin-right: 5px;" v-for="item in shop[index]" :key="item.commonId" :shopId="item.commonId"  @click="$emit('commonId' , item.commonId)">
                <a src="javascript:void(0)">
                  <img
                    :src="item.imageUrl"
                    alt
                    class="goods-pic"
                  />
                  <p class="goods-name">{{item.goodsName}}</p>
                  <h3>
                    <em class="onePrice"></em>
                  </h3>
                  <div class="goods-price">
                    <p>
                      ￥
                      <em>{{item.goodsPrice}}</em>
                    </p>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  props:['val'],
  data(){
    return {
      data:[],
      title:[],
      shop:[]
    }
  },
  watch:{
    val(){
      this.title = this.val.filter((item)=>{
        return item.itemTypeText === "标题栏模块"
      })
      this.data = this.val.filter((item)=>{
        return item.itemTypeText === "单张大图单行多列商品滑动模块"
      })    
      this.title.map((item,index) => {
        return this.title[index] = JSON.parse(item.itemData)[0]
      })
      this.data.map((item,index) => {
        this.data[index] = JSON.parse(item.itemData)[0]
        this.shop[index] = this.data[index].goods
      })
    }
  }
};
</script>

<style lang='stylus' scoped>
.title-block
    width: 94.66%;
    padding: 0 2.66%;
    .titleMain
        padding: 0.055rem 4%;
        line-height: 0.275rem;
        .title_text
            color: #333;
            font-size: 0.197rem;
            font-weight: bold;
            height: 0.264rem;

.solaImgWrap
    background: #fff;
    margin: 0 0.1rem;
    border-radius: 0.1rem;
    overflow: hidden;
    .solaImgHead
        padding-bottom: 0.1rem;
        border-radius: 0.1rem 0.1rem 0 0;
        overflow: hidden;
        img
            width 100%
    .solaImg_box
        padding: 0 0.1rem 0.1rem;
        margin: 0 auto;
        position: relative;
        overflow: auto ;
        width 100%
        z-index: 1;
        
        .solaImg_list
            display flex
            width max-content
        .solaImg
            width: 1rem;
            background: #fff;
            border-radius: 0.066rem;
            overflow: hidden;
            position: relative;
            img
                width: 100%;
                height: 1rem;
            .goods-name
                color: #333333;
                margin: 0.022rem 0.066rem;
                font-size: 0.1rem;
                line-height: 0.154rem;
                height: 0.154rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            h3
                color: #999;
                font-size: 0.1rem;
                margin: 0 0.066rem;
                height: 0.154rem;
                overflow: hidden;
                em
                    color: #FF4A42;
                    font-size: 0.13rem;
            .goods-price
                margin: 0 0.066rem;
                line-height: 0.22rem;
                height: 0.22rem;
                overflow: hidden;
                font-size: 0.1rem;
                color: #FF4A42;
                em
                    font-size: 0.13rem;
                    font-weight: 600;
</style>